<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/React/react.devlopment.js"></script>
    <script src="./lib/React/react-dom.development.js"></script>
    <!-- 引入 Babel 转码器 -->
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">

        // 1. 根据数据渲染结构
        const arr = [
            { id: 1, name: '迪丽热巴', age: 20 },
            { id: 2, name: '古力娜扎', age: 30 },
            { id: 3, name: '马尔扎哈', age: 40 }
        ]

        // <li>
        //     <p>
        //         <span>姓名：{arr[0].name}</span>
        //         <span>年龄：{arr[0].age}</span>
        //     </p>
        // </li>

        // 2. 创建虚拟节点
        const vNode = <ul>
           {
              // 使用map方法因为可以有返回值
              // unique  key   唯一的键
              arr.map(function(item) {
                return  <li key={item.id}>
                            <p>
                                <span>姓名：{item.name}</span>---
                                <span>年龄：{item.age}</span>
                            </p>
                        </li>
              })
           }
        </ul>

        // 3. 指定容器渲染
        ReactDOM.render(
            vNode,
            document.querySelector('#app')
        )
    </script>
</body>
</html>